<template>
  <div id="home_top">
    <!-- 每日说说 -->
    <div class="bbTimeList container" id="bbTimeList">
      <i class="haofont hao-icon-logo-moment" onclick="" style="font-size: 1.3rem;" title="瞬间"></i>
      <div class="swiper-container swiper-no-swiping" id="bbtalk" tabindex="-1">
        <div class="swiper-wrapper" id="bber-talk" @click="toPath('moments')">
          <div class="li-style swiper-slide" v-for="(say , index) in sayList" :key="index">
            {{ tool.changeContent(say.content) }}
          </div>
        </div>
      </div>
      <i class="bber-gotobb haofont hao-icon-circle-arrow-right" @click="toPath('moments')" title="查看全文"></i>
    </div>
    <!-- 置顶内容 -->
    <div class="recent-top-post-group" id="recent-top-post-group">
      <div class="recent-post-top" id="recent-post-top">
        <!-- banner -->
        <div id="bannerGroup">
          <!-- banners -->
          <div id="banners">
            <div class="banners-title">
              <div class="banners-title-big">{{ banner.title }}</div>
              <div class="banners-title-small">{{ banner.content }}</div>
            </div>
            <div class="tags-group-all">
              <!--  banners 使用默认值-->
              <div class="tags-group-wrapper">
                <div class="tags-group-icon-pair" v-for="(image , index) in imageList" :key="index">
                  <div class="tags-group-icon" :style="{background: image.one.color}">
                    <img :src="image.one.src ? image.one.src : '/src/assets/images/404s.gif'" :title="image.one.title"
                         :alt="image.one.title"/>
                  </div>
                  <div class="tags-group-icon" :style="{background: image.two.color}">
                    <img :src="image.two.src ? image.two.src : '/src/assets/images/404s.gif'" :title="image.two.title"
                         :alt="image.two.title"/>
                  </div>
                </div>
              </div>
              <!--  banners 使用默认值-->
            </div>
            <!-- 随机前往一篇文章 -->
            <a id="banner-hover" @click="tool.toRandomPost">
              <span class="bannerText">随便逛逛</span>
              <i class="haofont hao-icon-arrow-right banner-righticon"></i>
            </a>
          </div>
          <!-- category -->
          <div class="categoryGroup">
            <div class="categoryItem">
              <a class="categoryButton CB1 bikan" href="javascript:void(0);" @click="toPath('archives')">
                <span class="categoryButtonText">必看精选</span>
                <i class="haofont hao-icon-rocket"></i>
              </a>
            </div>
            <div class="categoryItem">
              <a class="categoryButton remen" href="javascript:void(0);" @click="toPath('archives')">
                <span class="categoryButtonText">热门文章</span>
                <i class="haofont hao-icon-fire"></i>
              </a>
            </div>
            <div class="categoryItem">
              <a class="categoryButton shiyong" href="javascript:void(0);" @click="toPath('archives')">
                <span class="categoryButtonText">主题文档</span>
                <i class="haofont hao-icon-book"></i>
              </a>
            </div>
          </div>
        </div>
        <!-- top -->
        <div class="topGroup">
          <div class="recent-post-item" v-for="(suggest , index) in suggestList" :key="index">
            <div class="post_cover">
              <a href="javascript:void(0);" :title="suggest.title" @click="toPath('archives')">
                <span class="recent-post-top-text">荐</span>
                <img class="post_bg" :alt="suggest.title"
                     :src="suggest.image ? suggest.image : '/src/assets/images/404s.gif'"/>
              </a>
            </div>
            <div class="recent-post-info">
              <a class="article-title" href="javascript:void(0);" :title="suggest.title"
                 @click="toPath('archives?id=' + suggest.id)">
                {{ suggest.title }}
              </a>
            </div>
          </div>
          <!-- 自定义的文章右上角的推荐文章 -->
          <!-- 今日推荐 -->
          <div class="todayCard" id="todayCard"
               @click="todayCardClick">
            <div class="todayCard-info">
              <div class="todayCard-tips">阅读文档</div>
              <div class="todayCard-title">Halo-Theme-Hao</div>
            </div>
            <div class="todayCard-cover"
                 style="background:url(/src/assets/images/bj.jpg) no-repeat center/cover"></div>
            <div class="banner-button-group">
              <a class="banner-button" href="javascript:void(0);" @click="toPath('more')">
                <i class="haofont hao-icon-circle-plus"></i>
                <span class="banner-button-text">更多推荐</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {computed, ref, onMounted} from 'vue';
import {useRouter} from 'vue-router';
import store from "../../store/index.js";
import toolJs from "../../utils/tool/index.js";

const router = useRouter();
const isIndex = ref(false);
const banner = computed(() => store.state.data.indexBanner);
const imageList = computed(() => store.state.data.indexBanner.imageList);
const sayList = computed(() => store.state.data.indexSayList);
const suggestList = computed(() => store.state.data.indexSignPostList);
const tool = computed(() => toolJs);

const toPath = (path) => {
  router.push(path)
}

const todayCardClick = () => {
  window.open('https://www.yuque.com/liuzhihangs/halo-theme-hao');
}

const initIndexEssay = () => {
  new Swiper(".swiper-container", {
    direction: "vertical",
    loop: !0,
    autoplay: {
      delay: 3e3,
      pauseOnMouseEnter: !0
    }
  })
}

onMounted(() => {
  initIndexEssay();
});
</script>

<style scoped>
a.categoryButton.bikan {
  background: linear-gradient(to right, #358bff, #15c6ff);
  background-size: 200%;
}

a.categoryButton.remen {
  background: linear-gradient(to right, #ff6655, #ffbf37);
  background-size: 200%;
}

a.categoryButton.shiyong {
  background: linear-gradient(to right, #18e7ae, #1eebeb);
  background-size: 200%;
}

[theme_mode=dark] a.categoryButton.bikan {
  background: linear-gradient(to right, #0653b8, #2fcbff);
  background-size: 200%;
}

[theme_mode=dark] a.categoryButton.remen {
  background: linear-gradient(to right, #e22a16, #da980c);
  background-size: 200%;
}

[theme_mode=dark] a.categoryButton.shiyong {
  background: linear-gradient(to right, #099e74, #0ea4a4);
  background-size: 200%;
}
</style>
